<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico"/>
    <link type="text/css" href="/static/css/css.css" rel="stylesheet"/>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/js.js"></script>
    <script src="/static/js/vue.js"></script>
    <script type="text/javascript" src="./static/js/axios.js"></script>
    <script type="text/javascript" src="./static/js/util.js"></script>
</head>

<body>
<div id="login">
    <div class="fr" v-if="userInfo.nickName == ''">
        <a href="login.html">登录</a> |
        <a href="register.html">注册</a> |
        <a href="javascript:;">加入收藏</a> |
        <a href="javascript:;">设为首页</a>
    </div>

    <div class="fr" v-else>
        <a href="javascript:;">欢迎{{userInfo.nickName}}</a> |
        <a href="javascript:;" @click="logout()">退出</a> |
        <a href="follow.html">我的关注</a> |
        <a href="javascript:;">加入收藏</a> |
        <a href="javascript:;">设为首页</a>
    </div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类</h3></div><!--list/-->
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <div class="clears"></div>
            </ul><!--nav/-->
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--list-nav/-->
    <div class="banner" style="background:url(/static/images/ban.jpg) center center no-repeat;"></div>

    <div class="content">
        <div class="width1190">
            <div class="reg-logo">
                <form id="signupForm" method="post" action="follow.html" class="zcform">
                    <p class="clearfix">
                        <label class="one" for="agent">手机号码：</label>
                        <input id="agent" type="text"
                               class="required"
                               v-model="loginVo.phone"
                               placeholder="请输入您的用户名"/>
                    </p>
                    <p class="clearfix">
                        <span style="color: red;margin-left: 90px;">{{valid.phone}}</span>
                    </p>
                    <p class="clearfix">
                        <label class="one" for="password">登录密码：</label>
                        <input id="password" type="password"
                               class="{required:true,rangelength:[8,20],}"
                               v-model="loginVo.password"
                               placeholder="请输入密码"/>
                    </p>
                    <p class="clearfix">
                        <span style="color: red;margin-left: 90px;">{{valid.password}}</span>
                    </p>
                    <!--<p class="clearfix agreement">
<input type="checkbox" />
<b class="left">已阅读并同意<a href="#">《用户协议》</a></b>
</p>-->
                    <p class="clearfix"><input class="submit" @click="submitLogin()" type="button" value="立即登录"/></p>
                </form>
                <div class="reg-logo-right">
                    <h3>如果您没有账号，请</h3>
                    <a href="register.html" class="logo-a">立即注册</a>
                </div><!--reg-logo-right/-->
                <div class="clears"></div>
            </div><!--reg-logo/-->
        </div><!--width1190/-->
    </div><!--content/-->

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房</strong></a><a href="about.html">关于我们</a><a
                    href="contact.html">联系我们</a><a href="follow.html">个人中心</a></div>
            <div class="fr">
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <dl>
                    <dt><img src="/static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <div class="clears"></div>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--footer/-->
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0&nbsp;&nbsp;&nbsp;&nbsp;技术支持：XXX</div>
    <div class="bg100"></div>
</div>
<script>
    new Vue({
        el:"#login",
        data:{
            //用户信息
            userInfo:{
                nickName:''
            },
            valid:{
                phone:'',
                password:''
            },
            loginVo:{
                phone:'',
                password:''
            }
        },
        methods:{
            submitLogin(){
                var isValid = true
                //校验
                if (this.loginVo.phone == '') {
                    this.valid.phone = '手机号不能为空'
                    isValid = false
                }
                if (this.loginVo.password == '') {
                    this.valid.phone = '密码不能为空'
                    isValid = false
                }
                if (!isValid) {
                    return
                }

                //登录
                axios({
                    "url":"/userInfo/login",
                    "method":"POST",
                    "data":this.loginVo
                }).then(response => {
                    if(response.data.code == 200){
                        //保存前端用户信息
                        //JSON.stringify(response.data.data)将json对象转成字符串
                        //{"nickname":"晴天","phone":"15999999999"}
                        //将字符串存储到sessionStorage对象中，sessionStorage它就是浏览器在会话范围内存储数据的一个对象
                        sessionStorage.setItem("userInfo",JSON.stringify(response.data.data))
                        //获取你从哪个页面过来的
                        var originUrl = util.getOriginUrl();
                        if (originUrl != '') {
                            //跳转到原页面
                            location.href = originUrl
                        }else {
                            //跳转到首页
                            location.href = 'index.html'
                        }
                    }else {
                        alert(response.data.message)
                    }
                })
            },
            //加载用户登录的信息
            loadUserInfo(){
                //从sessionStorage中获取登录的用户数据
                var userInfoString = sessionStorage.getItem("userInfo");
                //如果获取到的登录用户数据不为空
                if (userInfoString != null && userInfoString != '') {
                    //将登录的用户数据转成json，赋给data中的userInfo
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            //退出登录
            logout(){
                axios({
                    "url":"/userInfo/logout",
                    "method":"GET"
                }).then(response => {
                    sessionStorage.removeItem("userInfo")
                    location.href = "index.html"
                })
            }
        },
        created(){
            //加载用户数据
            this.loadUserInfo()
            //初始化搜索信息
            this.fetchDictData()
            //加载第一页数据
            this.findPage(1)
        }
    })
</script>
</body>
</html>